<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb/>
    </div>

    <div class="page-main" v-loading="state.loading">
      <div class="order" v-if="!state.loading" >
        <el-row class="order-card1-content" :gutter="20">
          <el-col :span="6" class="top-col">
            <top-card title="今日(人工随访)已拨打"
                      :lists="[{ title: state.mainData['manual'].today_count, name: '' }]"></top-card>
          </el-col>

          <el-col :span="6" class="top-col">
            <top-card title="今日(自动随访)已拨打"
                      :lists="[{ title: state.mainData.follow.today_call_count, name: '' }]"></top-card>
          </el-col>

          <el-col :span="6" class="top-col">
            <top-card title="今日未接通"
                      :lists="[{ title: state.mainData.follow.today_not_connected, name: '' }]"></top-card>
          </el-col>

          <el-col :span="6" class="top-col">
            <top-card title="接通率" :lists="[{ title:state.mainData.follow.today_success_ratio, name: '' }]"></top-card>
          </el-col>

          <el-col :span="6" class="top-col">
            <top-card title="今日呼叫总时长" :lists="[{ title: state.mainData.follow.today_duration, name: '' }]"></top-card>
          </el-col>

        </el-row>
      </div>

      <el-row :gutter="15">
        <el-col :span="12">
          <el-card class="order-card1" shadow="hover">
            <template #header> 本周呼叫数量统计</template>

            <div style="height: 400px" ref="homeLineRef"></div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="order-card1" shadow="hover">
            <template #header> 本月呼叫数量统计</template>
            <div style="height: 400px" ref="homeLineTwoRef"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="12">
          <el-card class="order-card1" shadow="hover">
            <template #header> 本月智能外呼接听情况占比</template>

            <div style="height: 400px" ref="homePieRef"></div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="order-card1" shadow="hover">
            <template #header> 本月智能外呼阳性指标数量及回访率</template>
            <div style="height: 400px" ref="homeLineThreeRef"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="intelligentOutbound-statistics-index">
import * as echarts from 'echarts';

import {storeToRefs} from 'pinia';
import {useRoutesList} from '/@/stores/routesList';
import {ElMessage, ElMessageBox} from 'element-plus';
import TopCard from '/@/components/TopCard/topcard.vue';
import {statisticsApi} from '/@/api/record/statistics'
import {onBeforeMount} from "vue";
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const homeLineRef = ref();
const homeLineTwoRef = ref();
const homePieRef = ref();
const homeLineThreeRef = ref();

// 定义变量内容
const stores = useRoutesList();
const router = useRouter();

const state = reactive({
  loading: false,
  mainData: {},
  global: {
    homeChartOne: null,
    homeChartTwo: null,
    homeChartThree: null,
    homeChartFour: null,
    dispose: [null, '', undefined],
  },
  tableData: {
    data: [{task_name: '甲状腺消融术术后随访7_2023-02-21'}],
    loading: true,
  },
  charts: {
    theme: '',
    bgColor: '',
    color: '#303133',
  },
  name: 'test',
  intentions: {
    '伤口出血\/渗出': {
      其他: 100,
    },
    换药情况: {
      其他: 100,
    },
    有无发热: {
      其他: 100,
    },
    伤口疼痛情况: {
      其他: 100,
    },
    '引流管\/引流片': {
      其他: 100,
    },
    并发症情况: {
      其他: 100,
    },
    病理结果: {
      其他: 100,
    },
    复诊时间: {
      其他: 100,
    },
    '遵从服药\/活动': {
      其他: 100,
    },
    其他问题: {
      其他: 100,
    },
  },
});

const getData = async () => {
  state.loading = true
  await statisticsApi().getStatistics().then(res => {
    state.mainData = res.data
    console.log(state.mainData)
    state.loading = false
    initLineChart();
    initLineChartTwo();
    initPieChart();
    initLineChartThree();
  })
}

onBeforeMount(() => {
  getData()
})

// 页面加载时
onMounted(() => {


});

//柱状图
const initLineChart = () => {
  state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
  const option = {
    title: {
      text: '',
      subtext: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['人工呼叫', '智能外呼'],
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true},
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '人工呼叫',
        type: 'bar',
        data: Object.values(state.mainData.manual.week),
        markPoint: {
          data: [
            {type: 'max', name: 'Max'},
            {type: 'min', name: 'Min'},
          ],
        },
      },
      {
        name: '智能外呼',
        type: 'bar',
        data: Object.values(state.mainData.follow.week),
      },
    ],
  };
  state.global.homeChartOne.setOption(option);
};

const initLineChartTwo = () => {
  state.global.homeChartTwo = markRaw(echarts.init(homeLineTwoRef.value, state.charts.theme));
  const option = {
    title: {
      text: '',
      subtext: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['人工呼叫', '智能外呼'],
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true},
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['第一周', '第二周', '第三周', '第四周'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '人工呼叫',
        type: 'bar',
        data: Object.values(state.mainData.manual.weekOfMonth),
        markPoint: {
          data: [
            {type: 'max', name: 'Max'},
            {type: 'min', name: 'Min'},
          ],
        },
      },
      {
        name: '智能外呼',
        type: 'bar',
        data: state.mainData.follow.month,
      },
    ],
  };
  state.global.homeChartTwo.setOption(option);
};

// 饼图
const initPieChart = () => {
  state.global.homeChartThree = markRaw(echarts.init(homePieRef.value, state.charts.theme));
  var getname = Object.keys(state.mainData.follow.month_call_situation);
  var getvalue =Object.values(state.mainData.follow.month_call_situation);
  var data = [];
  for (var i = 0; i < getname.length; i++) {
    data.push({name: getname[i], value: getvalue[i]});
  }
  const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
  const option = {
    backgroundColor: state.charts.bgColor,
    title: {
      text: '',
      x: 'left',
      textStyle: {fontSize: '15', color: state.charts.color},
    },
    toolbox: {
      show: true,
      feature: {
        mark: {show: true},
        dataView: {show: true, readOnly: false},
        restore: {show: true},
        saveAsImage: {show: true},
      },
    },
    tooltip: {trigger: 'item'},

    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: '0%',
      left: '65%',
      top: 'center',
      itemWidth: 14,
      itemHeight: 14,
      data: getname,
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            fontWeight: 400,
            width: 200,
            height: 35,
            padding: [0, 0, 0, 60],
            color: state.charts.color,
          },
          rate: {
            fontSize: 15,
            fontWeight: 500,
            height: 35,
            width: 40,
            padding: [0, 0, 0, 30],
            color: state.charts.color,
          },
        },
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['82', '102'],
        center: ['32%', '50%'],
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
        label: {show: true},
        labelLine: {show: true},
        data: data,
      },
    ],
  };
  state.global.homeChartThree.setOption(option);
};

// 横向图
const initLineChartThree = () => {
  state.global.homeChartFour = markRaw(echarts.init(homeLineThreeRef.value, state.charts.theme));

  const option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: ['第一周', '第二周', '第三周', '第四周'],
    },
    series: [
      {
        name: '阳性指标数量',
        type: 'bar',
        data: state.mainData.follow.month_call_back.positive,
      },
      {
        name: '回访率',
        type: 'bar',
        data: state.mainData.follow.month_call_back.back,
      },
    ],
  };
  state.global.homeChartFour.setOption(option);
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 30px;
}

:deep() .top-col {
  width: 20% !important;
  max-width: 20% !important;
}
</style>
